<template>
  <div class="container">
    <Header></Header>
    <Bottom></Bottom>
    <div id="map"></div>
    <div class="view">
      <el-button class="btn" @click="switchDirectionFn()">导航</el-button>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue"
import { Scene } from "@antv/l7"
import { Mapbox } from "@antv/l7-maps"
import mapboxgl from "mapbox-gl"
import Header from "./components/header.vue"
import Bottom from "./components/bottomTool.vue"
import { useControl } from "./hooks/useControl.js"
import { useLayer } from "./hooks/useLayer.js"
import { app } from "./main.js"

const token = import.meta.env.VITE_TOKEN
let map, scene, switchDirectionFn, buildingLayer, roadsLayer
onMounted(() => {
  mapboxgl.accessToken = token
  map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/streets-v11",
    center: [114.3, 30.5],
    zoom: 1,
    projection: "globe",
  })
  scene = new Scene({
    id: "map",
    map: new Mapbox({
      mapInstance: map,
    }),
    logoVisible: false,
  })
  app.provide("mapScene", { scene, map })
  useLayer(scene, map)
  const { switchDirections } = useControl(scene, map)
  switchDirectionFn = switchDirections

  map.on("style.load", () => {
    map.setFog({})
  })
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  position: relative;
  z-index: 3;
}
#map {
  width: 100vw;
  height: 100vh;
}

.view {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

a {
  text-decoration: none;
}

.l7-control-container .l7-bottom {
  bottom: 20px;
}

.l7-control-container .l7-top {
  top: 60px;
}

.mapboxgl-ctrl-top-left {
  top: 60px;
  left: 40px;
}

.btn {
  position: absolute;
  top: 180px;
  left: 10px;
  z-index: 9;
}
</style>
